<!--
 * Description: 报价系列新增页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/05/18 17:07
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="150px" :model="formData" size="mini">
      <el-row>
        <!--FD编号-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.fdId')">
            <el-input v-model="formData.fdId" v-blur:fdId="formData" clearable />
          </el-form-item>
        </el-col>

        <!--FD版本-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.version')">
            <el-input v-model="formData.version" v-blur:version="formData" clearable />
          </el-form-item>
        </el-col>

        <!--FD状态-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.fdStatus')">
            <el-select
              v-model="formData.fdStatus"
              clearable
              filterable
              :placeholder="$t('select.placeholder')"
            >
              <el-option
                v-for="item in $fdStatus()"
                :key="item.code"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <!--FD名称-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.fdName')">
            <el-input v-model="formData.fdName" v-blur:fdName="formData" clearable />
          </el-form-item>
        </el-col>

        <!--尺寸-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.lcd')">
            <el-input v-model="formData.lcd" v-blur:lcd="formData" clearable />
          </el-form-item>
        </el-col>

        <!--平台-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.platform')">
            <el-input v-model="formData.platform" v-blur:platform="formData" clearable />
          </el-form-item>
        </el-col>

        <!--bu-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.bu')">
            <el-select v-model="formData.bu" clearable :placeholder="$t('select.placeholder')">
              <el-option
                v-for="item in $store.getters['enums/getBuList']"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--ss-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.ss')">
            <el-date-picker
              v-model="formData.ss"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-col>

        <!--expires day-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.expiresDay')">
            <el-input-number
              v-model="formData.expiresDay"
              clearable
              controls-position="right"
              :precision="0"
            />
          </el-form-item>
        </el-col>
        <!--Volume-->
        <el-col :span="12">
          <el-form-item :label="$t('FdData.volume')">
            <el-input-number
              v-model="formData.volume"
              clearable
              controls-position="right"
              :precision="0"
            />
          </el-form-item>
        </el-col>

        <!--temp model-->
        <el-col :span="12">
          <el-form-item label="Temp Model">
            <el-input-number
              v-model="formData.tempModel"
              clearable
              controls-position="right"
              :precision="0"
            />
          </el-form-item>
        </el-col>

        <!--temp model number-->
        <el-col :span="12">
          <el-form-item label="Temp Model Number">
            <el-input
              v-model="formData.tempModelNumber"
              v-blur:tempModelNumber="formData"
              clearable
            />
          </el-form-item>
        </el-col>

        <!--base project id-->
        <el-col :span="12">
          <el-form-item label="Base Project Id">
            <el-input v-model="formData.baseProjectId" v-blur:baseProjectId="formData" clearable />
          </el-form-item>
        </el-col>
        <!--base model-->
        <el-col :span="12">
          <el-form-item label="Base Model">
            <el-input v-model="formData.baseModel" v-blur:BaseModel="formData" clearable />
          </el-form-item>
        </el-col>
        <!--base config-->
        <el-col :span="12">
          <el-form-item label="BaseConfig">
            <el-input v-model="formData.baseConfig" v-blur:BaseConfig="formData" clearable />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span style="display: block; text-align: center; margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
import { fdAdd } from '@/api/quote/fd'

export default {
  name: 'FdDataAdd',
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {
        fdId: '',
        version: '',
        fdStatus: '',
        fdName: '',
        lcd: '',
        platform: '',
        expiresDay: '',
        volume: '',
        ss: '',
        bu: '',
        tempModel: '',
        tempModelNumber: '',
        baseProjectId: '',
        baseModel: '',
        baseConfig: ''
      }
    }
  },
  methods: {
    async save() {
      try {
        this.isRequesting = true
        await fdAdd(this.formData, { msgSuccess: true, msgError: true })
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
